import * as React from 'react';

import { Layout, Menu, Icon } from 'antd';

import { Switch, Route } from 'react-router-dom';
import HomePage from '../components/homepage';
import ExpressPage from '../components/express';

const { Header, Sider, Content } = Layout;

interface State {
    collapsed: boolean
}
class Index extends React.Component<{}, {}> {
    public constructor(props: any) {
        super(props);
        this.state = {
            collapsed: false,
        } as State;
    }

    public toggle = () => {
        const { collapsed } = this.state as State;
        this.setState({
            collapsed: !collapsed,
        });
    }

    public render() {
        const { collapsed } = this.state as State;
        return (
            <Layout>
                <Sider
                    trigger={null}
                    collapsible
                    collapsed={collapsed}
                >
                    <div className="logo" />
                    <Menu theme="dark" mode="inline" defaultSelectedKeys={['1']}>
                        <Menu.Item key="1">
                            <Icon type="user" />
                            <span>nav 1</span>
                        </Menu.Item>
                        <Menu.Item key="2">
                            <Icon type="video-camera" />
                            <span>nav 2</span>
                        </Menu.Item>
                        <Menu.Item key="3">
                            <Icon type="upload" />
                            <span>nav 3</span>
                        </Menu.Item>
                    </Menu>
                </Sider>
                <Layout>
                    <Header style={{ background: '#fff', padding: 0 }}>
                        <Icon
                            className="trigger"
                            type={collapsed ? 'menu-unfold' : 'menu-fold'}
                            onClick={this.toggle}
                        />
                    </Header>
                    <Content style={{
                        margin: '24px 16px', padding: 24, background: '#fff', minHeight: 280,
                    }}
                    >
                        <Switch>
                            <Route exact path='/' component={HomePage} />
                            <Route exact path='/express' component={ExpressPage} />
                        </Switch>
                    </Content>
                </Layout>
            </Layout>
        );
    }
}

export default Index